<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icons | Onsen UI</title>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/onsenui.js"></script>

  <style type="text/css">
    h2 {
      border-bottom: 1px solid #ddd;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      font-weight: 300;
    }
  </style>
</head>

<body>

  <ons-navigator>
    <ons-page>
      <ons-toolbar>
        <div class="center">Icon</div>
      </ons-toolbar>

      <section style="padding: 10px">
        <h2>Material Design</h2>

        <ons-icon size="24px" icon="md-face"></ons-icon>
        <ons-icon size="24px" icon="md-home"></ons-icon>
        <ons-icon size="24px" icon="md-zoom-in"></ons-icon>

        <h2>Icon</h2>
        <ons-icon icon="bars"></ons-icon>

        <h2>Size</h2>

        <div>
          <ons-icon icon="ion-navicon" size="10px"></ons-icon> 10px  <br/>
          <ons-icon icon="ion-navicon" size="20px"></ons-icon> 20px  <br/>
          <ons-icon icon="ion-navicon" size="40px"></ons-icon> 40px  <br/>
          <ons-icon icon="ion-navicon" size="60px"></ons-icon> 80px  <br/><br/>

          <ons-icon icon="ion-navicon" size="lg"></ons-icon> lg  <br/>
          <ons-icon icon="ion-navicon" size="2x"></ons-icon> 2x  <br/>
          <ons-icon icon="ion-navicon" size="3x"></ons-icon> 3x  <br/>
          <ons-icon icon="ion-navicon" size="4x"></ons-icon> 4x  <br/>
          <ons-icon icon="ion-navicon" size="5x"></ons-icon> 5x  <br/>
        </div>


        <h2>Spin</h2>
        <ons-icon icon="spinner" spin></ons-icon> <br/>
        <ons-icon icon="refresh" spin></ons-icon>

        <h2>Fixed width</h2>
        <p>For use with list so that the icons align vertically</p>
        <h4>Without fixed width</h4>
        <div>
          <ul style="text-align: left; list-style: none; padding: 0;">
            <li>
              <ons-icon size="lg" icon="book"></ons-icon>
              Library
            </li>
            <li>
              <ons-icon size="lg" icon="pencil"></ons-icon>
              Applications
            </li>
            <li>
              <ons-icon size="lg" icon="cogs"></ons-icon>
              Settings
            </li>
          </ul>
        </div>

        <h4>With fixed width</h4>
        <div>
          <ul style="text-align: left; list-style: none; padding: 0;">
            <li>
              <ons-icon size="lg" icon="book" fixed-width="true"></ons-icon>
              Library
            </li>
            <li>
              <ons-icon size="lg" icon="pencil" fixed-width="true"></ons-icon>
              Applications
            </li>
            <li>
              <ons-icon size="lg" icon="cogs" fixed-width="true"></ons-icon>
              Settings
            </li>
          </ul>
        </div>



        <h2>Rotate</h2>
        <div>

            <div>
              <ons-icon icon="shield"></ons-icon>
              Normal
            </div>
            <div>
              <ons-icon icon="shield" rotate="90"></ons-icon>
              Rotate 90
            </div>
            <div>
              <ons-icon icon="shield" rotate="180"></ons-icon>
              Rotate 180
            </div>
            <div>
              <ons-icon icon="shield" rotate="270"></ons-icon>
              Rotate 270
            </div>

        </div>

        <h2>Color</h2>
        <ons-icon icon="trash-o" style="color: #E74C3C"></ons-icon> <br/>
        <ons-icon icon="thumbs-up" style="color: #3498DB"></ons-icon> <br/>
        <ons-icon icon="heart" style="color: #E74C3C"></ons-icon> <br/>
        <ons-icon icon="star" style="color: #F39C12"></ons-icon> <br/>

      </section>
    </ons-page>
  </ons-navigator>

</body>
</html>
